<!-- 协议签署 -->
<template>
  <div>
    <ZgNewPage
      ref="page"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="240"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h,i) in headers"
          :key="`column${i}`"
          :width="h.width===0 ? 'auto' : h.width"
          :title="h.label">
          <template slot-scope="record">
            <template v-if="h.code === '7'">
              <span style="color:#f49229" v-if="record[h.code] === '待企业签署'" type="warning">{{ record[h.code] }}</span>
              <template v-else> {{ record[h.code] }}</template>
            </template>
            <template v-else>
              {{ record[h.code] }}
            </template>
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
export default {
  data () {
    return {
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: true,
        showHeaderConfig: false,
        showAttachBtn: false
      },
      conditions: [
        { code: 'name', compType: '单行文本', label: '合同编号', defaultVal: '', extra: { placeholder: '请输入合同编号' } },
        { code: 'name', compType: '单行文本', label: '合同名称', defaultVal: '', extra: { placeholder: '请输入合同名称' } },
        { code: 'political3', compType: '字典', label: '签署状态', defaultVal: '', extra: { 字典类型: 'political' } },
        { code: 'name', compType: '单行文本', label: '融资企业', defaultVal: '', extra: { placeholder: '请输入融资企业' } },
        { code: 'name', compType: '单行文本', label: '金融机构', defaultVal: '', extra: { placeholder: '请输入金融机构' } },
        { code: 'month', compType: '日期', label: '创建时间', defaultVal: '', extra: { placeholder: '请选择时间' } }
      ],
      headers: [
        { code: '1', label: '合同编号', isShow: true, sort: 0 },
        { code: '2', label: '合同名称', isShow: true, sort: 0 },
        { code: '3', label: '融资企业', isShow: true, sort: 0 },
        { code: '4', label: '金融机构', isShow: true, sort: 0 },
        { code: '5', label: '平台', isShow: true, sort: 0 },
        { code: '6', label: '合同类型', isShow: true, sort: 0 },
        { code: '7', label: '签署状态', isShow: true, sort: 0 },
        { code: '8', label: '发起时间', isShow: true, sort: 0 },
        { code: '9', label: '生效日期', isShow: true, sort: 0 },
        { code: '10', label: '终止日期', isShow: true, sort: 0 }
      ],
      dataBtns: [
        { key: 1, name: '预览', type: 'link', isShow: () => { return true } },
        { key: 2, name: '下载', type: 'link', isShow: () => { return true } },
        { key: 3, name: '签署', type: 'link', isShow: () => { return true } }
      ]
    }
  },
  methods: {
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [
        { key: '1', id: '1', '1': 'SFX00091', '2': '三方协议名称1', '3': '武汉钢铁有限公司', '4': '浦发银行', '5': '山西焦煤集团', '6': '三方协议', '7': '待企业签署', '8': '2025-01-01', '9': '2025-01-01', '10': '2025-01-01' },
        { key: '2', id: '2', '1': 'SFX00091', '2': '三方协议名称1', '3': '武汉钢铁有限公司', '4': '浦发银行', '5': '山西焦煤集团', '6': '三方协议', '7': '待银行签署', '8': '2025-01-01', '9': '2025-01-01', '10': '2025-01-01' }
    ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    toAdmin (opt) {
      if (opt.key === 1) {
        alert('详情')
      } else if (opt.key === 2) {
        alert(2)
      } else if (opt.key === 3) {
        alert(3)
      }
    },
    onFilter (f, param) {
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
